<template>
  <BasicModal
    v-bind="$attrs"
    :title="!editStatus ? '添加用户' : '编辑用户'"
    :helpMessage="[`${!editStatus ? 'add user' : 'edit user'}`]"
    width="700px"
    @ok="handleOk"
    @visible-change="handleVisible"
  >
    <a-form
      ref="userForm"
      style="padding: 0 150px"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="用户名" name="username">
        <a-input v-model:value="formState.username" :disabled="editStatus" />
      </a-form-item>
      <a-form-item label="密码" name="password">
        <a-input-password v-model:value="formState.password" :disabled="editStatus" />
      </a-form-item>
      <a-form-item label="邮箱" name="email">
        <a-input v-model:value="formState.email" />
      </a-form-item>
      <a-form-item label="手机号" name="mobile">
        <a-input v-model:value="formState.mobile" />
      </a-form-item>
    </a-form>
  </BasicModal>
</template>
<script lang="ts" setup>
  import type { ValidateErrorEntity } from 'ant-design-vue/lib/form/interface';
  import type { UnwrapRef } from 'vue';
  import { reactive, ref, toRaw } from 'vue';
  import { BasicModal } from '/@/components/Modal';
  interface FormState {
    username: string;
    password: string;
    email: string;
    mobile: string;
  }
  const labelCol = { span: 6 };
  const wrapperCol = { span: 18 };
  const userForm = ref();
  const editStatus = ref(false);
  const editId = ref(0);

  const props = defineProps({
    singleUser: Object,
  });

  const emits = defineEmits(['addUser', 'editSingleUser', 'resetSingleUser']);
  const formState: UnwrapRef<FormState> = reactive({
    username: '',
    password: '',
    email: '',
    mobile: '',
  });
  const rules = {
    username: [
      { required: editStatus.value, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 10, message: '长度必须在3到10位', trigger: 'blur' },
    ],
    password: [
      { required: editStatus.value, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 12, message: '长度必须在6到12位', trigger: 'blur' },
    ],
  };

  const handleOk = () => {
    userForm.value
      .validate()
      .then(() => {
        if (editStatus.value) {
          const value = { id: editId.value, email: formState.email, mobile: formState.mobile };
          emits('editSingleUser', value);
        } else {
          const value = formState;
          emits('addUser', value);
        }
      })
      .catch((error: ValidateErrorEntity<FormState>) => {
        console.log(error);
      });
  };

  const handleVisible = (v) => {
    if (!v) {
      // 初始化表单
      editStatus.value = false;
      userForm.value.resetFields();
      emits('resetSingleUser');
    }
    setTimeout(() => {
      const constructorObject: any = toRaw(props.singleUser);
      if (Object.keys(constructorObject).length) {
        editStatus.value = true;
        for (const key in props.singleUser) {
          editId.value = props.singleUser['id'];
          formState[key] = props.singleUser[key];
        }
      }
    }, 300);
  };
</script>
